<template>
  <div class="app-container">
    <!-- 操作 -->
    <div class="crud">
      <div>
        <el-button v-if="role_list.indexOf('80000090401') != -1" class="fill-btn" @click="handleUpdate(-1, 'create')">添加
        </el-button>
        <el-button v-if="role_list.indexOf('80000090403') != -1" class="plain-btn" @click="handleDelmultip">删除
        </el-button>
      </div>
      <div class="search">
        <el-input v-model="listQuery.keyword" placeholder="查找网点资源/设备资源" class="crud-input">
          <el-button class="search-btn" slot="append" icon="el-icon-search" @keyup.enter.native="handleFilter"
            @click="handleFilter" />
        </el-input>
      </div>
    </div>

    <!-- 0 table表格 -->
    <el-form ref="ResourceGroupManagement" :model="ResourceGroupManagement" :rules="rules">
      <el-table :key="tableKey" v-loading="listLoading" element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading" :data="ResourceGroupManagement.list" border fit highlight-current-row
        style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column label="资源名称" align="center" prop="name">
          <template slot-scope="{ row, $index }">
            <el-form-item v-if="row.edit_inline" :prop="'list.' + $index + '.name'" :rules="rules.name">
              <el-input v-model="row.name" class="edit-input" size="small" />
            </el-form-item>
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="groupType" label="资源组类型" align="center" :filters="table_filter"
          :filter-method="filterType">
          <template slot-scope="{ row }">
            <el-form-item v-if="row.edit_inline">
              <span>{{ row.groupType == 1 ? "设备资源" : "网点资源" }}</span>
            </el-form-item>
            <div v-else>
              <span>{{ row.groupType == 1 ? "设备资源" : "网点资源" }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" prop="createTime" min-width="100px" sortable align="center">
          <template slot-scope="{ row }">
            <el-form-item v-if="row.edit_inline">
              <span>{{
                row.createTime | parseTime("{y}-{m}-{d} {h}:{i}")
              }}</span>
            </el-form-item>
            <span v-else>{{
              row.createTime | parseTime("{y}-{m}-{d} {h}:{i}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" min-width="240px" align="center">
          <template slot-scope="{ row }">
            <el-form-item v-if="row.edit_inline">
              <el-input v-model="row.remark" class="edit-input" size="small" :maxlength="60" type="textarea"
                placeholder="请输入内容" show-word-limit />
            </el-form-item>
            <span v-else>{{ row.remark }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="150px" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <template v-if="row.edit_inline">
              <span v-if="row.edit_inline" class="action action-update" @click="cancelEditLine(row)">取消</span>
              <span> | </span>
              <span v-if="row.edit_inline" class="action action-update" @click="updateDataInline(row)">保存</span>
            </template>
            <template v-else-if="role_list.indexOf('80000090402') != -1">
              <span class="action action-update" @click="row.edit_inline = !row.edit_inline">编辑</span>
              <span> | </span>
              <span class="action action-perm" @click="handleUpdate(row, 'update')">分配资源</span>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />

    <!-- 1 添加的弹出框 -->
    <el-dialog title="添加资源组" class="created-dialog" :visible.sync="dialogFormVisible" width="60%"
      :close-on-click-modal="false" @close="addCancel()">
      <el-form ref="dataForm" :model="temp" :rules="rules" label-width="90px" label-position="right">
        <div class="base-container">
          <div class="base-info">
            <div class="qn-title">
              <i class="qn-icon-flag"></i>
              <span>基本信息</span>
            </div>
            <div class="qn-content">
              <div class="qn-part">
                <el-form-item class="qn-icon-require" label="资源名称:" prop="name" size="small">
                  <el-input class="qn-role-input" placeholder="请输入资源名称" v-model="temp.name"></el-input>
                </el-form-item>
              </div>
              <div class="qn-part">
                <el-form-item label="备注:" size="small">
                  <el-input class="qn-role-textarea" type="textarea" :maxlength="120" :row="6" resize="none"
                    placeholder="请输入备注信息" v-model="temp.remark" show-word-limit></el-input>
                </el-form-item>
              </div>
            </div>
          </div>

          <div class="base-btn">
            <el-button class="plain-dialog-btn" @click="dialogFormVisible = false">取消</el-button>
            <el-button class="fill-dialog-btn" @click="createdData">保存</el-button>
          </div>
        </div>
        <!-- 分割线 -->
        <div class="qn-line"></div>

        <!-- 分配资源 -->
        <div class="distribute-container">
          <div class="select-resource-type">
            <el-radio v-model="temp.groupType" :label="2">网点资源</el-radio>
            <el-radio v-model="temp.groupType" :label="1">设备资源</el-radio>
          </div>

          <div v-show="temp.groupType == 2" class="resource-branch">
            <el-transfer style="text-align: left; display: inline-block" v-model="temp.resourceIds" filterable
              filter-placeholder="输入网点名" target-order="unshift" :titles="['网点列表', '已选网点']" :button-texts="['撤回', '选中']"
              :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}',
              }" ref="add_transfer_branch" :props="{ key: 'id', label: 'name' }" :right-default-checked="[1]"
              @change="branchChange" :data="list_branch">
              <span slot-scope="{ option }">{{ option.name }}</span>
              <!-- <el-pagination layout="prev, pager, next" small :total="1000" slot="left-footer"
               @current-change="branchCurrentChange"> </el-pagination> -->
              <!-- <el-button class="transfer-footer"  size="small">操作</el-button> -->
              <!-- <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button> -->
            </el-transfer>
          </div>
          <div v-show="temp.groupType == 1" class="resource-device">
            <el-transfer style="text-align: left; display: inline-block" v-model="temp.resourceIds" filterable
              filter-placeholder="输入网点名" target-order="unshift" :titles="['设备列表', '已选设备']" :button-texts="['撤回', '选中']"
              :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}',
              }" ref="add_transfer_device" :props="{ key: 'id', label: 'name' }" :right-default-checked="[1]"
              @change="deviceChange" :data="list_device">
              <span slot-scope="{ option }">{{ option.name }}</span>
            </el-transfer>
          </div>
        </div>
      </el-form>
    </el-dialog>

    <!-- 2 分配资源的弹出框 (修改) -->
    <el-dialog title="修改资源组" class="update-dialog" :visible.sync="dialogTreeVisible" width="60%"
      :close-on-click-modal="false" @close="updateCancel()">
      <div class="menu-title">
        <i class="qn-icon-flag"></i>
        <span>关联用户</span>
        <i class="qn-tj">已关联{{
            (temp.userInfoVOS && temp.userInfoVOS.length) || 0
          }}个用户</i>
      </div>
      <div class="related-user">
        <el-tag class="user-item" v-for="(user, index) in temp.userInfoVOS" :key="index" type="success">
          {{ user.name }}
        </el-tag>
      </div>

      <!-- 修改资源 -->
      <div class="distribute-container">
        <div class="select-resource-type">
          <el-radio v-model="temp.groupType" :disabled="temp.groupType != 2" :label="2">网点资源</el-radio>
          <el-radio v-model="temp.groupType" :disabled="temp.groupType != 1" :label="1">设备资源</el-radio>
        </div>

        <div v-show="temp.groupType == 2" class="resource-branch">
          <el-transfer style="text-align: left; display: inline-block" v-model="temp.resourceIds" filterable
            filter-placeholder="输入网点名" target-order="unshift" :titles="['网点列表', '已选网点']" :button-texts="['撤回', '选中']"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}',
            }" ref="update_transfer_branch" :props="{ key: 'id', label: 'name' }" :right-default-checked="[1]"
            @change="branchChange" :data="list_branch">
            <span slot-scope="{ option }">{{ option.name }}</span>
          </el-transfer>
        </div>
        <div v-show="temp.groupType == 1" class="resource-device">
          <el-transfer style="text-align: left; display: inline-block" v-model="temp.resourceIds" filterable
            filter-placeholder="输入网点名" target-order="unshift" :titles="['设备列表', '已选设备']" :button-texts="['撤回', '选中']"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}',
            }" ref="update_transfer_device" :props="{ key: 'id', label: 'name' }" :right-default-checked="[1]"
            @change="deviceChange" :data="list_device">
            <span slot-scope="{ option }">{{ option.name }}</span>
          </el-transfer>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button class="plain-dialog-btn" @click="dialogTreeVisible = false">取消</el-button>
        <el-button class="fill-dialog-btn" @click="updateData()">确认</el-button>
      </div>
    </el-dialog>

    <!-- 3 删除的提示框 -->
    <el-dialog :visible.sync="dialogPvVisible" title="提示" width="30%" center>
      <div class="del-data del-img">
        <img :src="require('../../assets/img/del.png')" alt="" />
      </div>
      <div class="del-data del-notify">确定对资源进行【删除】？</div>
      <span slot="footer" class="dialog-footer">
        <el-button class="plain-dialog-btn" @click="dialogPvVisible = false">取消</el-button>
        <el-button class="fill-dialog-btn" @click="delData">确认</el-button>
      </span>
    </el-dialog>
    <!-- 4 状态更改的提示框 -->
    <el-dialog :visible.sync="dialogToggle" title="提示" width="30%" center>
      <div class="del-data del-img">
        <img :src="require('../../assets/img/remind.png')" alt="" />
      </div>
      <div class="del-data del-notify">确定对状态进行【更改】？</div>
      <span slot="footer" class="dialog-footer">
        <el-button class="plain-dialog-btn">取消</el-button>
        <el-button class="fill-dialog-btn">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import waves from "@/directive/waves"; // waves directive
  import {
    parseTime
  } from "@/utils"; // 解析时间
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import {
    resourceAdd,
    resourceDel,
    resourceUpdate,
    resourceList,
  } from "@/api/permission";
  import {
    branchList,
    deviceList
  } from "@/api/branch";
  import {
    validPass
  } from "@/utils/validate";

  const calendarTypeOptions = [{
      key: "CN",
      display_name: "China"
    },
    {
      key: "US",
      display_name: "USA"
    },
    {
      key: "JP",
      display_name: "Japan"
    },
    {
      key: "EU",
      display_name: "Eurozone"
    },
  ];

  // arr to obj, such as { CN : "China", US : "USA" }
  const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name;
    return acc;
  }, {});

  export default {
    name: "PermissionResource",
    components: {
      Pagination
    },
    directives: {
      waves
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger",
        };
        return statusMap[status];
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type];
      },
    },
    data() {
      const validatePassword = (rule, value, callback) => {
        // if (!validPass(value) && (value && value.length != 64)) {
        if (!validPass(value)) {
          callback(new Error("8~16位,包含大小写字母和数字, 可以有特殊字符"));
        } else {
          callback();
        }
      };

      const validateRoleName = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入资源名称！"));
        } else {
          const reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
          if (value.length > 20 || !reg.test(value)) {
            callback(
              new Error("请输入1～20个字，资源名只允许中英文、数字和下划线！")
            );
          } else {
            callback();
          }
        }
      };

      return {
        calendarTypeOptions,
        tableKey: 0,
        table_filter: [{
            text: "设备资源",
            value: 1
          },
          {
            text: "网点资源",
            value: 2
          },
        ], // 表格过滤
        ResourceGroupManagement: {
          list: [],
        },
        total: 0, // 总条数
        listLoading: true,
        listQuery: {
          page: 1, // 第几页
          limit: 10, // 每页显示的条数row
          keyword: "", // 搜索关键字
        },

        dialogFormVisible: false,
        dialogStatus: "",
        dialogTreeVisible: false,

        temp: {
          name: "",
          remark: "",
          groupType: 2,
          resourceIds: [],
          userInfoVOS: [],
        },
        temp_row: null,

        // 网点资源--------------------------------------------
        list_branch: [], // 当前登录者的 所有网点
        branch_total: 0, // 网点的总数
        check_branchs: [], // 已绑定的网点###
        branchQuery: {
          page: 1, // 第几页
          limit: 1000, // 每页显示的条数row (日后优化-->分页)
          keyword: "", // 搜索关键字
        },
        // 设备资源-------------------------------------------
        list_device: [], // 当前登录者的 所有设备
        device_total: 0, // 设备总数
        check_devices: [], // 已绑定的设备###
        deviceQuery: {
          page: 1, // 第几页
          limit: 1000, // 每页显示的条数row (日后优化-->分页)
          keyword: "", // 搜索关键字
        },

        multipleSelection: [],
        is_multip: false, // 是否批量删除

        del_id: "",
        del_index: null,
        dialogPvVisible: false, // 删除提示框
        dialogToggle: false, // 状态更改的提示框
        rules: {
          name: [{
            required: true,
            trigger: "blur",
            validator: validateRoleName
          }, ],
          password: [{
            required: true,
            trigger: "blur",
            validator: validatePassword
          }, ],
          userName: [{
            required: true,
            trigger: "blur",
            validator: validatePassword
          }, ],
          again_pass: [{
            required: true,
            trigger: "blur",
            validator: validatePassword
          }, ],
        },
        role_list: [], // 按钮权限
      };
    },
    watch: {
      // dialogFormVisible: {
      //   handler(val, oldval) {
      //     if (val) {
      //       this.getListRole() // 获得角色列表
      //     }
      //   }
      // }
    },
    created() {
      this.getList();
    },
    mounted() {
      this.getPermsResource();
      this.getDeviceList();
      this.role_list = this.$store.getters.menu_code_list;
    },
    methods: {
      // 获取 table 列表
      getList() {
        this.listLoading = true;
        resourceList({
            page: this.listQuery.page,
            limit: this.listQuery.limit,
            name: this.listQuery.keyword,
          })
          .then((res) => {
            if (res.code == 0) {
              console.log(res.list);
              this.ResourceGroupManagement.list = res.list;
              this.ResourceGroupManagement.list =
                this.ResourceGroupManagement.list.map((item, i) => {
                  let resource_branchs = [];
                  item.resources.forEach((item2) => {
                    resource_branchs.push(item2.resourceId);
                  });
                  this.$set(item, "edit_inline", false);
                  item.original_name = item.name;
                  item.original_remark = item.remark;
                  item.resourceIds = resource_branchs;
                  // item.original_resourceIds = resource_branchs.slice()
                  return item;
                });

              this.total = parseInt(res.total);
              this.listLoading = false;
            } else {
              this.$message({
                message: "请求失败",
                type: "error",
              });
            }
          })
          .catch(() => {
            this.listLoading = false;
            this.$message({
              message: "网络错误",
              type: "error",
            });
          });
      },
      // 取消当行编辑
      cancelEditLine(row, is_cancel = true) {
        row.name = row.original_name;
        row.remark = row.original_remark;
        // row.resourceIds = row.original_resourceIds.slice()
        row.edit_inline = false;
        if (is_cancel)
          this.$message({
            message: "已经取消更改",
            type: "warning",
          });
      },
      // 行内编辑提交更新请求
      updateDataInline(row) {
        this.$refs["ResourceGroupManagement"].validate((valid) => {
          if (valid) {
            resourceUpdate(row)
              .then((res) => {
                if (res.code == 0) {
                  // const index = this.list.findIndex(v => v.id === this.temp.id) // 找到被更改的item下标
                  // this.list.splice(index, 1, this.temp) // 通过下标更改list的数据
                  this.getList();
                  // this.resetfilter()
                  row.edit_inline = false;
                  this.$notify({
                    title: "成功",
                    message: "更新成功",
                    type: "success",
                    duration: 4000,
                  });
                } else {
                  this.cancelEditLine(row, false);
                  this.$message({
                    message: "更改失败",
                    type: "error",
                  });
                }
              })
              .catch((res) => {
                this.cancelEditLine(row, false);
                this.$message({
                  message: "更改失败!",
                  type: "error",
                });
              });
          }
        });
      },

      // 获取当前登录者 所拥有的 网点列表
      getPermsResource() {
        branchList().then((res) => {
          this.list_branch = res.data || [];
          this.branch_total = res.total;
        });
      },
      // 获取当前登录者所拥有的 设备列表
      getDeviceList() {
        deviceList({
          offset: this.deviceQuery.page - 1,
          limit: this.deviceQuery.limit,
        }).then((res) => {
          this.list_device = res.data.list || [];
          this.device_total = res.data.total;
        });
      },

      // 点击了 '分配资源' 或 '添加' ======================================================
      handleUpdate(row, str) {
        if (str == "create") {
          this.resetTemp(); // 清空
          this.dialogFormVisible = true;
          this.$nextTick(() => {
            this.$refs["dataForm"].clearValidate();
          });
        }
        if (str == "update") {
          this.temp = Object.assign({}, row); // 克隆一个对象
          this.temp_row = row;
          this.dialogTreeVisible = true;
        }
        this.dialogStatus = str;
      },
      // 取消修改资源
      updateCancel() {
        this.$refs["update_transfer_branch"].clearQuery("left");
        this.$refs["update_transfer_branch"].clearQuery("right");
        this.$refs["update_transfer_device"].clearQuery("left");
        this.$refs["update_transfer_device"].clearQuery("right");
      },
      // 取消新增
      addCancel() {
        this.$refs["add_transfer_branch"].clearQuery("left");
        this.$refs["add_transfer_branch"].clearQuery("right");
        this.$refs["add_transfer_device"].clearQuery("left");
        this.$refs["add_transfer_device"].clearQuery("right");
      },

      // 确认 更新数据
      updateData() {
        if (this.temp.resourceIds && this.temp.resourceIds.length != 0) {
          resourceUpdate(this.temp).then(() => {
            // const index = this.list.findIndex(v => v.id === this.temp.id) // 找到被更改的item下标
            // this.list.splice(index, 1, this.temp) // 通过下标更改list的数据
            this.getList();
            this.updateCancel(); // 清空筛选框
            this.dialogTreeVisible = false;
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 4000,
            });
          });
        } else {
          this.$message({
            message: "请选择网点或设备!",
            type: "error",
          });
        }
      },
      // 新增了资源组
      createdData() {
        if (this.temp.resourceIds && this.temp.resourceIds.length != 0) {
          this.$refs["dataForm"].validate((valid) => {
            if (valid) {
              resourceAdd(this.temp).then(() => {
                // const index = this.list.findIndex(v => v.id === this.temp.id) // 找到被更改的item下标
                // this.list.splice(index, 1, this.temp) // 通过下标更改list的数据
                this.getList();
                this.addCancel();
                this.dialogFormVisible = false;
                this.$notify({
                  title: "成功",
                  message: "创建成功",
                  type: "success",
                  duration: 4000,
                });
              });
            }
          });
        } else {
          this.$message({
            message: "网点不能为空",
            type: "error",
          });
        }
      },
      // 清空temp
      resetTemp() {
        this.temp = {
          name: "",
          remark: "",
          groupType: 2,
          resourceIds: [],
        };
      },
      // 根据资源组类型 过滤资源组列表
      filterType(value, row, column) {
        // console.log(value);
        // this.temp.groupType = value
        // this.getList()
        const property = column["property"];
        return row[property] === value;
      },

      // 网点的穿梭框 发生变化 ###
      branchChange() {
        console.log("网点穿梭框发生变化");
      },
      // 网点 页码切换 ###
      branchCurrentChange(val) {
        console.log(val);
        this.branchQuery.page = val;
        // this.getPermsResource()
      },
      // 设备的穿梭框 发生变化 ###
      deviceChange() {
        console.log("设备穿梭框发生变化");
      },
      // 设备 页码切换 ###
      deviceCurrentChange(val) {
        console.log(val);
        this.branchQuery.page = val;
        // this.getPermsResource()
      },
      // 删除资源绑定的用户 ###
      rmRoleUser(num) {
        this.temp.related_arr.splice(num, 1);
      },

      // 单个删除===============================================
      handleDelete(row, index) {
        this.is_multip = false;
        this.del_id = row.id;
        this.del_index = index;
        this.dialogPvVisible = true;
      },
      // 批量删除
      handleDelmultip() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            message: "没有被选项!",
            type: "error",
            duration: 4000,
            showClose: true,
            center: true,
          });
        } else {
          this.is_multip = true;
          this.dialogPvVisible = true;
        }
      },
      // 确认了删除
      delData() {
        let ids = [];
        if (this.is_multip) {
          // 批量删
          this.multipleSelection.forEach((item, i) => {
            ids.push(item.id);
          });
        } else {
          ids = [this.del_id];
        }
        resourceDel(ids).then(() => {
          this.dialogPvVisible = false;
          // this.list.splice(this.del_index, 1)
          this.getList();
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 4000,
          });
        });
      },

      // 搜索
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      // 批量选择
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    },
  };
</script>

<style lang="scss">
  @import "~@/styles/variables.scss";

  .crud-input {
    border: 0;

    &.el-input--medium {
      font-size: 12px;
    }

    &.el-input--medium .el-input__inner {
      height: 27px !important;
      background: transparent;
      border: 0;
      -webkit-appearance: none;
      border-radius: 3px;
      // padding: 12px 5px 12px 15px;
      color: $text_dark;
      caret-color: $text_dark;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px $my_opacity inset !important;
        -webkit-text-fill-color: $text_dark !important;
      }
    }

    .el-input-group__append {
      color: var(--app_primary);
      border: 0;
      border-left: 1px solid var(--app_primary);

      .el-button {
        // height: 27px;
        // border: 1px solid $my_primary !important;
        // background-color: #f11;
      }
    }
  }

  .el-dialog {
    .el-dialog__header {
      background-color: #f5f7f5 !important;
    }
  }

  .qn-role-textarea {
    .el-textarea__inner {
      height: 70px;
      font-size: 14px;
      font-weight: 400;
      background: rgba(0, 0, 0, 0.02);
      border: 1px dashed rgba(0, 0, 0, 0.15);
      border-radius: 4px;
    }
  }
</style>


<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .app-container {
    padding: 10px;
    background-color: #ffffff;

    .crud {
      margin-bottom: 32px;
      display: flex;
      justify-content: space-between;

      .crud-input {
        height: 27px;
        width: 300px;
        border: 1px solid var(--app_primary);
        border-radius: 3px;
        // background-color: aqua;
      }
    }

    // background-color: #f99 !important;
    .el-table {
      .action {
        font-size: 13px;
        color: var(--app_primary);
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }

      .expand-row {
        display: flex;
        align-items: center;

        .el-tag {
          margin: 7px;
        }
      }

      .bdtop {
        border-top: 1px solid #eee;
      }

      .bdbom {
        border-bottom: 1px solid #eee;
      }

      .temp-input {
        display: flex;
        flex-wrap: nowrap;
      }

      .edit-input {
        margin-right: 10px;
      }

      .cancel-btn {
        // display: inline-block;
      }
    }

    .el-dialog {
      .del-data {
        text-align: center;
        margin-bottom: 16px;

        img {
          width: 110px;
          height: 110px;
        }
      }

      .del-img {}
    }

    .created-dialog {
      .base-container {
        display: flex;
        justify-content: space-between;

        .base-info {
          width: 60%;

          .qn-title {
            margin-top: 2px;

            .qn-icon-flag {
              display: inline-block;
              width: 10px;
              height: 10px;
              background-color: var(--app_primary);
              border-radius: 50%;
              margin-right: 5px;
            }

            span {
              font-family: PingFangSC-Medium;
              font-size: 14px;
              color: rgba($my_primary, 1);
            }
          }

          .qn-content {
            // background-color: #eef;
            margin-top: 22px;

            .qn-part {
              position: relative;
              margin-top: 18px;

              .qn-role-input {
                width: 220px;
              }

              .qn-role-textarea {
                .el-textarea__inner {
                  height: 94px;
                  font-size: 14px;
                  font-weight: 400;
                  background: rgba(0, 0, 0, 0.02);
                  border: 1px dashed rgba(0, 0, 0, 0.15);
                  border-radius: 4px;
                }
              }

              .qn-note-limit {
                position: absolute;
                right: 4px;
                bottom: 4px;
                font-style: normal;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #9b9b9b;
              }
            }
          }
        }
      }

      .qn-line {
        width: 100%;
        margin: 10px 0;
        border-bottom: 1px solid #e9e9e9;
      }

      .distribute-container {
        // background-color: #fee;

        .select-resource-type {
          // background-color: #afe;
          margin-bottom: 20px;
        }

        .qn-title {
          margin-top: 2px;

          .qn-icon-flag {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: var(--app_primary);
            border-radius: 50%;
            margin-right: 5px;
          }

          span {
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: rgba($my_primary, 1);
          }

          .qn-tj {
            font-size: 12px;
            color: $text_light;
            line-height: 24px;
            margin-left: 20px;
          }
        }
      }
    }

    .update-dialog {
      .menu-title {
        line-height: 30px;
        margin-bottom: 15px;

        .qn-icon-flag {
          display: inline-block;
          width: 10px;
          height: 10px;
          background-color: var(--app_primary);
          border-radius: 50%;
          margin-right: 5px;
        }

        span {
          color: $text_dark;
        }

        .qn-tj {
          font-size: 12px;
          color: $text_light;
          margin-left: 20px;
        }
      }

      .related-user {
        border: 1px dashed $border_light;
        padding: 10px;
        border-radius: 3px;
        background-color: #fafafa;
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;

        .user-item {
          margin-right: 10px;
        }
      }

      .distribute-container {
        // background-color: #fee;

        .select-resource-type {
          // background-color: #afe;
          margin-bottom: 20px;
        }
      }
    }
  }
</style>
